<template>
	<el-dialog
		:visible="true"
		width="70%"
		:destroy-on-close="true"
		class="rempadding"
		:before-close="handleClose"
	>
		<div slot="title" class="dialog-title">
			<el-form :inline="true" label-width="auto">
				<el-row>
					<el-col :span="24">
						<el-form-item :label="$t('report.venue_name') + ' : '">
							{{ rowVal.venueName }}
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<el-divider></el-divider>
		<div>
			统计周期：
			<span v-if="rowVal.startDates !== rowVal.endDates">
				{{ rowVal.startDates }}～{{ rowVal.endDates }}
			</span>
			<span v-else>{{ rowVal.startDates }}</span>
		</div>
		<el-table
			element-loading-spinner="el-icon-loading"
			size="mini"
			class="small-size-table"
			:header-cell-style="getRowClass"
			:data="betDetaiInfolList"
			style="width: 100%; margin: 15px 0"
			highlight-current-row
		>
			<el-table-column
				prop="proxyName"
				align="center"
				:label="'代理账号'"
				min-width="120"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.userName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="proxyLevel"
				align="center"
				:label="'代理层级'"
				min-width="120"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.proxyLevel }}
				</template>
			</el-table-column>
			<el-table-column
				prop="nickName"
				align="center"
				:label="'业务模式'"
				min-width="120"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ mappingBusinessModel(scope.row.businessModel) }}
				</template>
			</el-table-column>
			<el-table-column
				prop="labelName"
				align="center"
				:label="'帐号状态'"
				min-width="120"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span
						v-if="!!scope.row.paymentLockStatus"
						class="deleteRgba"
					>
						{{ $t('common.account_lock_status') }}
						<br />
					</span>
					<span
						v-if="!!scope.row.loginLockStatus"
						class="disableRgba"
					>
						{{ $t('common.login_lock_status') }}
						<br />
					</span>
					<!-- <span
							v-if="!!scope.row.gameLockStatus"
							class="lockingRgba"
						>
							{{ $t('common.game_lock_status') }}
						</span> -->
					<span
						v-if="
							scope.row.loginLockStatus === 0 &&
								scope.row.paymentLockStatus === 0
						"
						class="normalRgba"
					>
						{{ $t('common.account_status_normal') }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				prop="labelName"
				align="center"
				:label="'代理标签'"
				min-width="120"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.labelName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="nickName"
				align="center"
				:label="'注册时间'"
				min-width="120"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.createdAt || '-' }}
				</template>
			</el-table-column>
		</el-table>
		<el-table
			v-loading="loading"
			size="mini"
			border
			:data="tableData"
			class="small-size-table"
			style="margin-bottom: 15px"
			show-summary
			:summary-method="
				(val) => handleRowDay(val, subSummary, totalSummary)
			"
			:header-cell-style="getRowClass"
			highlight-current-row
			element-loading-spinner="el-icon-loading"
		>
			<el-table-column
				prop="staticsDate"
				align="center"
				:label="$t('report.date')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ reportDateFn(scope.row.reportDate) || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="memberCount"
				align="center"
				:label="$t('report.member_count')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ handleNumber('', scope.row.memberCount, 0) }}
				</template>
			</el-table-column>
			<el-table-column
				prop="betCount"
				align="center"
				:label="$t('report.bet_count')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ handleNumber('', scope.row.betCount, 0) }}
				</template>
			</el-table-column>
			<el-table-column
				prop="betAmount"
				align="center"
				:label="$t('report.bet_amount')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{ handleTotalNumber('USDT', scope.row.betAmount) }}
					</p>
					<!-- <p>
						{{ handleTotalNumber('THB', scope.row.betAmountTHB) }}
					</p>
					<p>
						{{ handleTotalNumber('VND', scope.row.betAmountVND) }}
					</p> -->
				</template>
			</el-table-column>
			<el-table-column
				prop="validBetAmount"
				align="center"
				:label="$t('report.valid_bet_amount')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{
							handleTotalNumber('USDT', scope.row.validBetAmount)
						}}
					</p>
					<!-- <p>
						{{
							handleTotalNumber(
								'THB',
								scope.row.validBetAmountTHB
							)
						}}
					</p>
					<p>
						{{
							handleTotalNumber(
								'VND',
								scope.row.validBetAmountVND
							)
						}}
					</p> -->
				</template>
			</el-table-column>
			<el-table-column
				prop="netAmount"
				align="center"
				:label="$t('report.net_amount')"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p :style="handleNumberColor(scope.row.netAmount)">
						{{ handleTotalNumber('USDT', scope.row.netAmount) }}
					</p>
					<!-- <p :style="handleNumberColor(scope.row.netAmountTHB)">
						{{ handleTotalNumber('THB', scope.row.netAmountTHB) }}
					</p>
					<p :style="handleNumberColor(scope.row.netAmountVND)">
						{{ handleTotalNumber('VND', scope.row.netAmountVND) }}
					</p> -->
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			v-show="!!total"
			class="text-right"
			:current-page.sync="pageNum"
			background
			layout="total, sizes,prev, pager, next, jumper"
			:page-size.sync="pageSize"
			:page-sizes="pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
		<div slot="footer" class="dialog-footer" style="text-align: center">
			<el-button type="primary" @click="handleClose">关闭</el-button>
		</div>
	</el-dialog>
</template>
<script>
import list from '@/mixins/list'
import summaryList from './summaryList'
export default {
	mixins: [list, summaryList],
	props: {
		rowVal: {
			type: Object,
			default: () => {}
		},
		closeDialog: {
			type: Function,
			default: () => {}
		}
	},
	data() {
		return {
			loading: false,
			betDetaiInfolList: [],
			totalSummary: {},
			tableData: [],
			subSummary: {}
		}
	},
	methods: {
		reportDateFn(val) {
			const dateStr = String(val)
			if (dateStr.length !== 8) {
				return ''
			}
			return `${dateStr.slice(0, 4)}/${dateStr.slice(
				4,
				6
			)}/${dateStr.slice(6)}`
		},
		loadData() {
			this.loading = true
			this.pageCurrency = this.rowVal?.currency || ''
			this.rowVal.pageNum = this.pageNum
			this.rowVal.pageSize = this.pageSize
			this.betDetaiInfolList = []
			this.$api
				.getVenueMemberId({
					proxyId: this.rowVal.proxyId,
					startDate: this.rowVal.startDate,
					endDate: this.rowVal.endDate
				})
				.then((res) => {
					if (res.code === 200) {
						this.betDetaiInfolList.push(res.data)
					}
				})
			this.$api
				.getReportVenueDetailList(this.rowVal)
				.then((res) => {
					this.loading = false
					if (res.code === 200) {
						this.tableData = []
						this.tableData = res?.data?.record || []
						this.subSummary = res?.data?.summary || {}
						this.total = res?.data?.totalRecord || 0
					}
				})
				.catch(() => {
					this.loading = false
				})
			this.$api.getReportVenueDetailSummary(this.rowVal).then((res) => {
				if (res.code === 200) {
					this.totalSummary = res?.data || {}
				}
			})
		},
		handleClose() {
			this.closeDialog(false)
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-table__footer-wrapper .cell {
	display: flex;
	justify-content: center;
	align-items: center;
}
::v-deep .el-table__body-wrapper {
	overflow-y: auto;
	max-height: 45vh;
}
</style>
